<template>
  <div class="DetailSwiper" v-if="swiperData && Object.keys(swiperData).length > 0">
    <swiper ref="myDetail" :options="swiperDetailOptions">
      <swiper-slide v-for="item in swiperData"><img :src="item" alt="" :key="item"></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css';
  import { swiper, swiperSlide } from 'vue-awesome-swiper';

  export default {
    name: "DetailSwiper",
    components: {
      swiper,
      swiperSlide
    },
    props: {
      swiperData: {
        type: Array,
        default(){
          return [];
        }
      }
    },
    data(){
      return {
        swiperDetailOptions: {
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
            stopOnLastSlide: false
          },
          loop: true,
          pagination: {
            el: '.swiper-pagination'
          },
        }
      }
    },
    computed: {
      swiper(){
        return this.$refs.myDetail.swiper;
      }
    }
  }
</script>

<style scoped>
  .DetailSwiper{
    position: relative;
    height: 300px;
    overflow: hidden;
  }
  .DetailSwiper img{
    width: 100%;
  }
  .swiper-pagination{
    position: absolute;
    top: 270px;
    left: 0;
    right: 0;
  }
  /deep/ .swiper-pagination-bullet-active {
    width: 18px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 20px;
  }
</style>